<!DOCTYPE html>
<html lang="en" dir=ZgotmplZ>

<head>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dealing with data # Overview # flowchart LR I1(Input Component) -. data binding --- DO(Data Object); I2(Custom Component) -. data binding --- DO(Data Object); DO -- set data --&gt; A(Entity Agent); A -- updates --&gt; DO; A &lt;-- fetch / update --&gt; API[(Rest API)]; SB(Save Button) -- triggers --&gt; A LB(Load Button) -- triggers --&gt; A Data Object # The furo-data-object translates raw JSON to objects which are usable for the UI components and vice versa.">
<meta name="theme-color" content="#FFFFFF"><meta property="og:title" content="Dealing with data" />
<meta property="og:description" content="Dealing with data # Overview # flowchart LR I1(Input Component) -. data binding --- DO(Data Object); I2(Custom Component) -. data binding --- DO(Data Object); DO -- set data --&gt; A(Entity Agent); A -- updates --&gt; DO; A &lt;-- fetch / update --&gt; API[(Rest API)]; SB(Save Button) -- triggers --&gt; A LB(Load Button) -- triggers --&gt; A Data Object # The furo-data-object translates raw JSON to objects which are usable for the UI components and vice versa." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://web-components.furo.pro/docs/guides/dealing-w-data/" /><meta property="article:section" content="docs" />

<meta property="article:modified_time" content="2021-12-09T14:42:13+01:00" />
<title>Dealing with data | フロー Furo Web</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.9cf05710651e8f9a974123fc1a656fbb5eb2f912dba4c022b69792d2f93e1c40.css" integrity="sha256-nPBXEGUej5qXQSP8GmVvu16y&#43;RLbpMAitpeS0vk&#43;HEA=">
<script defer src="/en.search.min.b0bf84841deec51ff6f5057e68d3262d4265b55605be890ebf7c38b97b2fe329.js" integrity="sha256-sL&#43;EhB3uxR/29QV&#43;aNMmLUJltVYFvokOv3w4uXsv4yk="></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  

  <link href="/main.css" rel="stylesheet"/>
</head>

<body dir=ZgotmplZ>
<fixed-tooltip-display></fixed-tooltip-display>
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <div ></div>
  <main class="container flex">
    <aside class="book-menu">
      
  <nav>
<h2 class="book-brand">
  <a href="/"><span>フロー Furo Web</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>











  



  
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-64d0ac0e8a385a6091d238dd382da7cf" class="toggle" checked />
    <label for="section-64d0ac0e8a385a6091d238dd382da7cf" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/guides/" class="">Guides</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/dealing-w-data/" class=" active">Dealing with data</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-48dba13e1258b1e2cf129032b0d1fc3e" class="toggle"  />
    <label for="section-48dba13e1258b1e2cf129032b0d1fc3e" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/guides/routing/" class="">Routing</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/routing/subrouting/" class="">Sub routing</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/app-flow/" class="">Application Flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/FNA/" class="">Extending a UI lib</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/type-renderer/" class="">Type Renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/featuretoggle/" class="">Feature Toggles</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c131070b1e715f28624af5fdfd93165a" class="toggle"  />
    <label for="section-c131070b1e715f28624af5fdfd93165a" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/" class="">Packages</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-cca842a4d0376120bfbf8e2c08c07ff4" class="toggle"  />
    <label for="section-cca842a4d0376120bfbf8e2c08c07ff4" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-data/" class="">@furo/data</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-api-fetch/" class="">furo-api-fetch</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-collection-agent/" class="">furo-collection-agent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-custom-method/" class="">furo-custom-method</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-flow-repeat/" class="">furo-data-flow-repeat</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-hide-content/" class="">furo-data-hide-content</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-object/" class="">furo-data-object</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-deep-link/" class="">furo-deep-link</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-entity-agent/" class="">furo-entity-agent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-entity-field/" class="">furo-entity-field</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-hateoas-state/" class="">furo-hateoas-state</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-message-container-handler/" class="">furo-message-container-handler</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-rel-exists/" class="">furo-rel-exists</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-reverse-deep-link/" class="">furo-reverse-deep-link</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-type-renderer/" class="">furo-type-renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/AgentHelper/" class="">AgentHelper</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/DataObject/" class="">DataObject</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/FieldNode/" class="">FieldNode</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/FieldNodeAdapter/" class="">FieldNodeAdapter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/RepeaterNode/" class="">RepeaterNode</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ScalarTypeHelper/" class="">ScalarTypeHelper</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorDefaultTypes/" class="">ValidatorDefaultTypes</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorFuroBigDecimal/" class="">ValidatorFuroBigDecimal</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorFuroReference/" class="">ValidatorFuroReference</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufBoolValue/" class="">ValidatorGoogleProtobufBoolValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufFloatValue/" class="">ValidatorGoogleProtobufFloatValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufInt64Value/" class="">ValidatorGoogleProtobufInt64Value</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleTypeDate/" class="">ValidatorGoogleTypeDate</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleTypeMoney/" class="">ValidatorGoogleTypeMoney</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorNumericTypes/" class="">ValidatorNumericTypes</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-021db3e6cecc4cb464638d9452766952" class="toggle"  />
    <label for="section-021db3e6cecc4cb464638d9452766952" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-fbp/" class="">@furo/fbp</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/empty-fbp-node/" class="">empty-fbp-node</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/flow-bind/" class="">flow-bind</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/flow-repeat/" class="">flow-repeat</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/DOMFBP/" class="">DOMFBP</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/FBP/" class="">FBP</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/FbpBreakpoints/" class="">FbpBreakpoints</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3e40020dcb75400959dcadfc7e247453" class="toggle"  />
    <label for="section-3e40020dcb75400959dcadfc7e247453" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-framework/" class="">@furo/framework</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/BaseSpecValidators/" class="">BaseSpecValidators</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/Env/" class="">Env</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/FuroFeatureToggle/" class="">FuroFeatureToggle</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/i18n/" class="">i18n</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/Init/" class="">Init</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/KeyState/" class="">KeyState</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/NodeEvent/" class="">NodeEvent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroBigDecimal/" class="">ValidatorFuroBigDecimal</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroFatNumeric/" class="">ValidatorFuroFatNumeric</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroFatString/" class="">ValidatorFuroFatString</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroReference/" class="">ValidatorFuroReference</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufBoolValue/" class="">ValidatorGoogleProtobufBoolValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufFloatValue/" class="">ValidatorGoogleProtobufFloatValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufInt64Value/" class="">ValidatorGoogleProtobufInt64Value</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufTimestamp/" class="">ValidatorGoogleProtobufTimestamp</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleTypeDate/" class="">ValidatorGoogleTypeDate</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleTypeMoney/" class="">ValidatorGoogleTypeMoney</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorRegistry/" class="">ValidatorRegistry</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-71921f8b00ba9f1d7ea65557f9a4892b" class="toggle"  />
    <label for="section-71921f8b00ba9f1d7ea65557f9a4892b" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-layout/" class="">@furo/layout</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-backdrop/" class="">furo-backdrop</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-backdrop-display/" class="">furo-backdrop-display</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-empty-spacer/" class="">furo-empty-spacer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-form-layouter/" class="">furo-form-layouter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-horizontal-flex/" class="">furo-horizontal-flex</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-resizer/" class="">furo-resizer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-split-view/" class="">furo-split-view</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-vertical-flex/" class="">furo-vertical-flex</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-vertical-scroller/" class="">furo-vertical-scroller</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-d417ac8cb7a1ccb4381e8ddf1c7562a0" class="toggle"  />
    <label for="section-d417ac8cb7a1ccb4381e8ddf1c7562a0" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-route/" class="">@furo/route</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-app-flow/" class="">furo-app-flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-app-flow-router/" class="">furo-app-flow-router</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-document-title/" class="">furo-document-title</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-location/" class="">furo-location</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-location-updater/" class="">furo-location-updater</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-lock-navigation/" class="">furo-lock-navigation</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-pages/" class="">furo-pages</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-panel-coordinator/" class="">furo-panel-coordinator</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/BasePanel/" class="">BasePanel</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/panelRegistry/" class="">panelRegistry</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-97a0e3b8ee9f906213df62a54586924e" class="toggle"  />
    <label for="section-97a0e3b8ee9f906213df62a54586924e" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-util/" class="">@furo/util</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-config/" class="">furo-config</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-config-loader/" class="">furo-config-loader</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-de-bounce/" class="">furo-de-bounce</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-demo-snippet/" class="">furo-demo-snippet</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-feature-toggle/" class="">furo-feature-toggle</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-fetch-json/" class="">furo-fetch-json</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-forth-stack/" class="">furo-forth-stack</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-get-clipboard/" class="">furo-get-clipboard</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-graph-renderer/" class="">furo-graph-renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-head-tail/" class="">furo-head-tail</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-hp-35/" class="">furo-hp-35</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-interval-pulse/" class="">furo-interval-pulse</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-key-filter/" class="">furo-key-filter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-keydown/" class="">furo-keydown</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-markdown/" class="">furo-markdown</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-navigation-pad/" class="">furo-navigation-pad</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-pretty-json/" class="">furo-pretty-json</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-put-clipboard/" class="">furo-put-clipboard</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-show-flow/" class="">furo-show-flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/light-bulb/" class="">light-bulb</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/Config/" class="">Config</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/ConfigTree/" class="">ConfigTree</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/EmptyStackError/" class="">EmptyStackError</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-e8b2e199854a11484105b91a892831fe" class="toggle"  />
    <label for="section-e8b2e199854a11484105b91a892831fe" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-webtypes/" class="">@furo/web-types</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
  </ul>











  
<ul>
  
  <li>
    <a href="https://ui5.furo.pro" target="_blank" rel="noopener">
        SAP UI5 Integration
      </a>
  </li>
  
  <li>
    <a href="https://furo.pro" target="_blank" rel="noopener">
        フロー Furo
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside.book-menu nav");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Dealing with data</strong>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  <nav id="TableOfContents">
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#data-object">Data Object</a></li>
    <li><a href="#entity-agent">Entity Agent</a></li>
    <li><a href="#hateoas">Hateoas</a></li>
  </ul>
</nav>


  </aside>
  
 
      </header>

      
      
  <article class="markdown"><h1 id="dealing-with-data">
  Dealing with data
  <a class="anchor" href="#dealing-with-data">#</a>
</h1>
<h2 id="overview">
  Overview
  <a class="anchor" href="#overview">#</a>
</h2>


<script src="/mermaid.min.js"></script>

  <script>mermaid.initialize({
  "flowchart": {
    "useMaxWidth":true
  },
  "theme": "default"
}
)</script>




<p class="mermaid">
flowchart LR
I1(Input Component) -. data binding --- DO(Data Object);
I2(Custom Component) -. data binding --- DO(Data Object);
DO -- set data --> A(Entity Agent);
A -- updates --> DO;
A <-- fetch / update --> API[(Rest API)];
SB(Save Button) -- triggers --> A
LB(Load Button) -- triggers --> A
</p>

<h2 id="data-object">
  Data Object
  <a class="anchor" href="#data-object">#</a>
</h2>
<p>The <code>furo-data-object</code> translates raw <code>JSON</code> to objects which are usable for the
UI components and vice versa.</p>


<p class="mermaid">
flowchart LR
I1(Input Component) -. data binding --- DO(Data Object);
I2(Custom Component) -. data binding --- DO(Data Object);
DO -- produces --> JSON
JSON -- consumes --> DO
</p>

<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-ui5-text-input</span>  
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-bind-data</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--taskDO(*.fields.display_name)&#34;</span>&gt;&lt;/<span style="color:#000080">furo-ui5-text-input</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-data-object</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">type</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;task.Task&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-inject-raw</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--rawJsonData&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a61717;background-color:#e3d2d2">@</span><span style="color:#008080">-object-ready</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--taskDO&#34;</span>&gt;&lt;/<span style="color:#000080">furo-data-object</span>&gt;
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="entity-agent">
  Entity Agent
  <a class="anchor" href="#entity-agent">#</a>
</h2>
<p>The main task of the <code>furo-entity-agent</code> is to communicating with REST API&rsquo;s.</p>
<p>It exposes a simple API for <strong>saving</strong>, <strong>loading</strong>, <strong>creating</strong> and <strong>deleting</strong> stuff on the server side.</p>


<p class="mermaid">
flowchart LR
DO(Data Object) -- object --> A(Entity Agent);
A -- json --> DO;
A -- json --> API[(Rest API)];
API -- json --> A
</p>

<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-data-object</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">type</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;task.Task&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-inject-raw</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--rawJsonData&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a61717;background-color:#e3d2d2">@</span><span style="color:#008080">-object-ready</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--taskDO&#34;</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#000080">furo-data-object</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-entity-agent</span> 
</span></span><span style="display:flex;"><span>  <span style="color:#008080">service</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;TaskService&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-create</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--createClicked&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-hts-in</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--hts&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-bind-request-object</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--taskDO&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a61717;background-color:#e3d2d2">@</span><span style="color:#008080">-response</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--rawJsonData&#34;</span>&gt;&lt;/<span style="color:#000080">furo-entity-agent</span>&gt;
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="hateoas">
  Hateoas
  <a class="anchor" href="#hateoas">#</a>
</h2>
<p><code>furo-deep-link</code> builds static HATEOAS information based on query params and service-type.</p>
<p>The HATEOAS data is used by the <code>furo-entity-agent</code> to resolve the locations it has to send the requests to.</p>


<p class="mermaid">
flowchart LR
DL(Deep Link) -- HATEOAS --> A(Entity Agent);
QP[Query Params] -- json --> DL
</p>

<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-deep-link</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">ƒ-qp-in</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--pageURLChanged(*.query)&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#008080">service</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;TaskService&#34;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a61717;background-color:#e3d2d2">@</span><span style="color:#008080">-hts-out</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;--hts&#34;</span>&gt;&lt;/<span style="color:#000080">furo-deep-link</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">furo-location</span> 
</span></span><span style="display:flex;"><span>  <span style="color:#a61717;background-color:#e3d2d2">@</span><span style="color:#008080">-location-changed</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#39;--pageURLChanged&#39;</span> 
</span></span><span style="display:flex;"><span>&gt;&lt;/<span style="color:#000080">furo-location</span>&gt;
</span></span></code></pre></td></tr></table>
</div>
</div><p>Assume we visit a link like <code>my.app.com/display_task?tsk=5</code></p>
<p><code>furo-deep-link</code> receives the query params  <code>{&quot;tsk&quot;: &quot;5&quot;}</code> from <code>furo-location</code>.</p>
<p>It will then produce the <strong>HATEOAS</strong> links according to the specified service.</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>[
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;rel&#34;</span>: <span style="color:#d14">&#34;self&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;href&#34;</span>: <span style="color:#d14">&#34;/api/v1/tasks/5&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;method&#34;</span>: <span style="color:#d14">&#34;GET&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;type&#34;</span>: <span style="color:#d14">&#34;task.Task&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;service&#34;</span>: <span style="color:#d14">&#34;TaskService&#34;</span>
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;rel&#34;</span>: <span style="color:#d14">&#34;delete&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;href&#34;</span>: <span style="color:#d14">&#34;/api/v1/tasks/5&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;method&#34;</span>: <span style="color:#d14">&#34;DELETE&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;type&#34;</span>: <span style="color:#d14">&#34;task.Task&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;service&#34;</span>: <span style="color:#d14">&#34;TaskService&#34;</span>
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  {
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;rel&#34;</span>: <span style="color:#d14">&#34;create&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;href&#34;</span>: <span style="color:#d14">&#34;/api/v1/tasks&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;method&#34;</span>: <span style="color:#d14">&#34;POST&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;type&#34;</span>: <span style="color:#d14">&#34;task.Task&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#000080">&#34;service&#34;</span>: <span style="color:#d14">&#34;TaskService&#34;</span>
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>]
</span></span></code></pre></td></tr></table>
</div>
</div></article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">



  <div><a class="flex align-center" href="https://github.com/theNorstroem/furo/documentation/commit/64790663db396dd015487058398106502063c52b" title='Last modified by veith | December 9, 2021' target="_blank" rel="noopener">
      <img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
      <span>December 9, 2021</span>
    </a>
  </div>



</div>

 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#data-object">Data Object</a></li>
    <li><a href="#entity-agent">Entity Agent</a></li>
    <li><a href="#hateoas">Hateoas</a></li>
  </ul>
</nav>

 
    </aside>
    
  </main>

  
</body>


<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.6.0/dist/doc-helper.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.6.0/dist/furo-fbp.js"></script>
</html>












